:global .global-class {
  color: rebeccapurple;
}

:global(.global-class-2) {
  .local-class-inside-global {
    color: rebeccapurple;
  }
}

:local .local-class {
  color: rebeccapurple;
}

:local(.local-class-2) {
  .local-class-inside-local {
    color: rebeccapurple;
  }
}

.reserved-words {
  .default {
    color: rebeccapurple;
  }
  .const {
    color: rebeccapurple;
  }
}

.nested-class-parent {
  .child-class {
    color: rebeccapurple;
  }
  &--extended {
    color: rebeccapurple;
  }
}

$color: rebeccapurple !default;

@for $section from 1 to 10 {
  .section-#{$section} {
    color: $color;
  }
}

@import 'mixin';

.class-with-mixin {
  @include set-margin(0);
}

.App_logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: my-animation infinite 20s linear;
  }
}

// .commented-parent-class {
//   .commented-child-class
// }

/*
.commented-parent-class {
  .commented-child-class
}
*/

@import 'my-folder';
